<template>
    <div class="commonAside" :class="showSpread ? 'spread' : 'put_away'">
        <div class="show_spread" @click="changeAsideStatus">
            <!-- <img src="../assets/images/spread.png" alt="" @click="changeAsideStatus"> -->
            <img src="../assets/images/images_new/spread_icon.png" alt=""  v-show="showSpread">
            <img src="../assets/images/images_new/put_away_icon.png" alt="" v-show="!showSpread">
        </div>
        <el-menu active-text-color="rgba(255, 255, 255, 1)" :default-active="activeIndex"
            background-color="rgba(53, 53, 53)" class="el_menu_vertical" text-color="rgba(141, 141, 141, 1)"
            @select="handleSelect" unique-opened router :collapse="!showSpread" :collapse-transition="false">
            <template v-for="(item, index) in menuListInfo" :key="index">
                <el-sub-menu  :class="{ borderbot: index != menuListInfo.length - 1 }"
                    v-if="item.children && item.children.length > 0 && item.children[0].type == 2" :index="index.toString()"
                    popper-class="menu_popper">
                    <template #title>
                        <img :src="getAssetsFile_active(item.icon)" alt="" class="icon" v-show="activeMenuIndex == index">
                        <img :src="getAssetsFile(item.icon)" alt="" class="icon" v-show="activeMenuIndex != index">
                        <span :class="item.name.length == 2 ? 'letter_spa' : ''">{{ item.name }}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item class="sub_menu" v-for="(item2, index2) in item.children" :key="index2"
                            :index="item2.pageUrl"><span :class="item2.name.length == 2 ? 'letter_spa' : ''">{{ item2.name
                            }}</span>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
                <el-menu-item :class="{ borderbot: index != menuListInfo.length - 1 }" :index="item.pageUrl" v-else>
                    <img :src="getAssetsFile_active(item.icon)" alt="" class="icon" v-show="activeMenuIndex == index">
                    <img :src="getAssetsFile(item.icon)" alt="" class="icon" v-show="activeMenuIndex != index">
                    <template #title><span :class="item.name.length == 2 ? 'letter_spa' : ''">{{ item.name
                    }}</span></template>
                </el-menu-item>
            </template>

        </el-menu>
    </div>
</template>

<script setup lang="ts">
import {
    useRouter
} from 'vue-router';
import {
    useMain,
    store
} from "../store/index";
import {
    storeToRefs
} from 'pinia';

const router = useRouter();
let activeIndex = ref('');
const useMainStore = useMain(store); //pinia


//showSpread 左侧菜单栏是否展开 menuListInfo 菜单列表
let { showSpread,menuListInfo} = storeToRefs(useMainStore); //storeToRefs 保持响应式


//点击切换菜单栏宽度

const changeAsideStatus = () => {
    showSpread.value = !showSpread.value;
    // console.log('showSpread', showSpread.value);
    useMainStore.updatedShowSpread(showSpread.value); //存储到pinia中
}
//当前选中的父级菜单
const activeMenuIndex = ref(0);
const handleSelect = (key: string, keyPath: string[], item: {}) => {
    // getMenuIndex(key)

}
const getMenuIndex = (key: string) => {
    // console.log('key',key);

    menuListInfo.value.forEach((item: any, index: any) => {
        if (item.children && item.children.length > 0 && item.children[0].type == 2) {
            item.children.forEach((item2: any, index2: number) => {
                if (item2.pageUrl == key) {
                    activeMenuIndex.value = index;
                }
            })
        } else {
            if (item.pageUrl == key) {
                activeMenuIndex.value = index;
            }
        }
    })
    // console.log('activeMenuIndex', activeMenuIndex.value);

}

onMounted(() => {
    console.log('menuListInfo',menuListInfo.value);
    
    activeIndex.value = router.currentRoute.value.path;
    if (router.currentRoute.value.path == '/message') {
        activeIndex.value = '/home';
    }
    getMenuIndex(activeIndex.value);
})

//监听路由变化,切换项目时,菜单可能变化
watch(
    () => router.currentRoute.value,
    (newValue: any) => {
        let currentPath = router.currentRoute.value.path
        if (currentPath == '/message') {
            activeIndex.value = '/home';
        } else {
            activeIndex.value = currentPath;
        }
        getMenuIndex(activeIndex.value);
        // console.log('132',activeMenuIndex.value);

    }, {
    immediate: true
}
)


// 获取assets静态资源
const getAssetsFile = (url: string) => {
    return new URL(`../assets/images/${url}.png`,
        import.meta.url).href
}
// 获取assets静态资源
const getAssetsFile_active = (url: string): any => {
    return new URL(`../assets/images/${url}_active.png`,
        import.meta.url).href
}
</script>

<style scoped lang="scss">
.commonAside {

    font-size: 14px;
    color: rgba(114, 114, 114, 1);
    height: 100%;
    position: relative;
    padding-top: 0px;

    transition: width 0.3s linear 0s;
    -moz-transition: width 0.3s linear 0s;
    /* Firefox 4 */
    -webkit-transition: width 0.3s linear 0s;
    /* Safari and Chrome */
    -o-transition: width 0.3s linear 0s;
    /* Opera */

    .show_spread {
        width: 40px;
        height: 40px;
        position: absolute;
        bottom: 23px;
        // left: 21px;
        left: 16px;
        cursor: pointer;
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;

        &:hover {
            background-color: rgb(112, 105, 95, 0.3);
        }

        img {
            width: 18px;
        }
    }


    .el_menu_vertical {
        height: calc(100% - 100px);
        // overflow: hidden;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .el-menu {
        border-right: 0;
        position: relative;
        letter-spacing: 1px;

        .icon {
            margin-right: 8px;
            width: 22px;
            height: 22px;
        }

        .el-menu-item {
            font-size: 13px;
            width: 100%;
            height: 45px;
            padding-left: 22px;
            margin: 15px 0;

            &:hover {
                background-color: rgb(112, 105, 95, 0.3);
            }

            :deep(.el-menu-tooltip__trigger) {
                // padding-left: 40px;
                padding-left: 22px;
            }
        }

        // .el-menu-item-group {
        //     padding-left: 20px;
        // }

        .sub_menu {
            height: 45px;
            padding-left: 52px;
            position: relative;
        }

        .el-sub-menu {
            font-size: 14px;
            margin: 15px 0;

            :deep(.el-sub-menu__title) {
                font-size: 14px;
                height: 45px;
                // padding-left: 40px;
                padding-left: 22px;

                &:hover {
                    background-color: rgb(112, 105, 95, 0.3) !important;
                }

                .el-icon {
                    svg {
                        width: 16px;
                        height: 16px;
                        color: rgba(114, 114, 114, 1);
                    }
                }
            }

            :deep(.el-sub-menu__icon-arrow) {
                right: auto;
                left: 128px;
            }

        }

        .is-active {
            :deep(.el-sub-menu__title) {
                color: #fff !important;

                .el-icon {
                    svg {
                        // color: rgba(248, 221, 142, 1);
                        color: #fff;
                    }
                }
            }
        }


        .borderbot {
            // border-bottom: 1px solid rgba(255, 255, 255, 0.15);
            box-sizing: border-box;
        }

        // .letter_spa {
        //     letter-spacing: 30px;
        // }

        .el-menu-item-group__title {
            display: none;
        }

        // 子菜单高亮时，使其父菜单也高亮
        .is-active {
           

            &.el-menu-item {
                background: linear-gradient(89.61deg, rgba(248, 221, 142, 0.3) 0.019%, rgba(219, 236, 248, 0) 147.01%);
                
                &::before {
                    content: "";
                    height: 45px;
                    width: 5px;
                    background: rgb(212, 175, 55);
                    position: absolute;
                    left: 0;
                    top: 0;

                }
            }

            .el-sub-menu__title {
                color: #fff !important;
            }
        }
    }

    .el-menu--collapse {
        width: 100%;
        // padding-left: 18px;
    }

}

.spread {
    // width: 300px;
    width: 160px;

}

.put_away {
    width: 83px;

    .el-menu {
        .el-menu-item {
            padding-left: 30px;

            :deep(.el-menu-tooltip__trigger) {
                padding-left: 30px;
            }
        }

        .el-sub-menu {
            position: relative;
            &.is-active {
                :deep(.el-sub-menu__title) {
                    background: linear-gradient(89.61deg, rgba(248, 221, 142, 0.3) 0.019%, rgba(219, 236, 248, 0) 147.01%);
                    &::before {
                        content: "";
                        height: 45px;
                        width: 5px;
                        background: rgb(212, 175, 55);
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 9999;
                    }


                }
            }
            :deep(.el-sub-menu__title) {
                padding-left: 30px;
            }

        }
    }
}

::-webkit-scrollbar-thumb {
    background-color: rgb(192, 164, 91, 0.45);
    border-radius: 4px;
}

::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 4px;
    height: 4px;
}
</style>
<style lang="scss">

.menu_popper {
    .el-menu--popup {
        min-width: 120px;
       text-indent: 20px;
       .el-menu-item:hover {
        background-color: rgb(112, 105, 95, 0.3);
       }
    }
}

.el-menu-item-group__title {
    display: none;
}

.el-popper.is-dark {
    color:rgba(141, 141, 141, 1);
}
</style>